<template>
    <div class="food-container">
       <div class="header">
           <p>详情</p>
           <el-button class="link" type="primary">
                <router-link to="/check/list" style="color: #fff;">返回</router-link>
           </el-button>
       </div>
       <div class="main">
           <div class="table-wrap">
               <div class="header-wrap">基本信息</div>
               <div class="wrap-menu">
                   <div class="menu-list">
                       <div class="menu-name">头像</div>
                       <div class="menu-info">
                           <img class="avatar" :src="info.images[0].fileUrl" alt="">
                       </div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">姓名</div>
                       <div class="menu-info">{{info.trueName}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">性别</div>
                       <div class="menu-info">{{info.sex?'男':'女'}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">地区</div>
                       <div class="menu-info">{{info.province+info.city+info.district}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">认证身份</div>
                       <div class="menu-info">{{returnDotsArr(info.duty)}}</div>
                   </div>
                   <div class="menu-list" v-if="info.company">
                       <div class="menu-name">医疗机构</div>
                       <div class="menu-info">{{info.company}}</div>
                   </div>
                   <div class="menu-list" v-if="info.department">
                       <div class="menu-name">科室</div>
                       <div class="menu-info">{{returnName(info.department)}}</div>
                   </div>
                   <div class="menu-list" v-if="info.title">
                       <div class="menu-name">职称</div>
                       <div class="menu-info">{{positionList[info.title]}}</div>
                   </div>
                    <div class="menu-list" v-if="info.contactPerson">
                       <div class="menu-name">联系人</div>
                       <div class="menu-info">{{info.contactPerson}}</div>
                   </div>
                   <div class="menu-list" v-if="info.contactPhone">
                       <div class="menu-name">联系方式</div>
                       <div class="menu-info">{{info.contactPhone}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">资格证书</div>
                       <div class="menu-info">
                           <img class="image-info"  @click="imgClick(item.fileUrl)" v-if="item" v-for="(item,index) in info.certs" :key="index"   :src="item.fileUrl" alt="">
                       </div>
                   </div>        
                    <div class="menu-list">
                       <div class="menu-name">简介</div>
                       <div class="menu-info">{{info.introduction}}</div>
                   </div>
                   <div class="menu-list">
                       <div class="menu-name">擅长</div>
                       <div class="menu-info">{{info.skill}}</div>
                   </div>               
               </div>
           </div>
       </div>  
        <el-dialog
                :visible.sync="dialogVisible"
                size="tiny"
        >
            <img style="width: 100%" :src="imgUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return {
            takeoutId:'',
            dataList:'',
            info:'',
            statusArr:{
                'n':'不通过',
                'y':'已通过',
                'w':'待审核'
            },
            dotsArr:[
                {key: "doctor", value: "医生"},
                {key: "nurse", value: "护士"},
                {key: "recover_physical_therapist", value: "康复理疗师"},
                {key: "health_manager", value: "健康管理师"},
                {key: "apothecary", value: "药师"},
                {key: "hospital", value: "医院"},
                {key: "clinic", value: "诊所"},
                {key: "drugstore", value: "药店"},
                {key: "medical_instrument_supplie", value: "医疗器械供应商"}
            ],
            positionList: {
                "doctor_one": "主任医师",
                "doctor_two":  "副主任医师",
                "doctor_three":"主治医师",
                "doctor_four": "医师",
                "doctor_five":  "执业药师",
                "doctor_six": "药士",
                "doctor_seven":"药师",
                "doctor_eight":"主管药师",
                "doctor_nine":"助理医师",
                "doctor_eleven":"中医师",
                "doctor_tweleve": "康复理疗师",
                "doctor_thirteen":"健康管理师",
                "doctor_fourteen": "执业护士"
            },
            imgUrl:'',
            dialogVisible:false,
            sectionList: [
                {key: "fu", value: "妇科"},
                {key: "er", value: "儿科"},
                {key: "nei", value: "内科"},
                {key: "quan", value: "全科"},
                {key: "hu_xi", value: "呼吸科"},
                {key: "xin_nei", value: "心内科"},
                {key: "xiao_hua", value: "消化科"},
                {key: "gan_bing", value: "肝病科"},
                {key: "shen_zang", value: "肾脏科"},
                {key: "nei_fen_mi", value: "内分泌科"},
                {key: "shen_jing_nei", value: "神经内科"},
                {key: "feng_shi_mian_yi", value: "风湿免疫科"},
                {key: "zhong_liu", value: "肿瘤科"},
                {key: "xue_ye", value: "血液科"},
                {key: "pi_fu", value: "皮肤科"},
                {key: "ru_xian", value: "乳腺科"},
                {key: "nan", value: "男科"},
                {key: "teng_tong", value: "疼痛科"},
                {key: "lao_nian_bing", value: "老年病科"},
                {key: "zhou_wei_xue_guan", value: "周围血管科"},
                {key: "gu_shang", value: "骨伤科"},
                {key: "zhong_yi_yi_nan_bing", value: "中医疑难病科"},
                {key: "zhen_jiu", value: "针灸科"},
                {key: "zhi_wei_bing", value: "治未病科"},
                {key: "tui_na", value: "推拿科"},
                {key: "wu_guan", value: "五官科"},
                {key: "yan", value: "眼科"},
                {key: "er_bi_hou", value: "耳鼻喉科"},
                {key: "gang_chang", value: "肛肠科"},
                {key: "kou_qiang", value: "外科"},
                {key: "wai_shen_jing", value: "外神经科"},
                {key: "mi_niao_wai", value: "泌尿外科"},
                {key: "ji_zhen", value: "急诊科"},
                {key: "sheng_zhi", value: "生殖科"},
                {key: "kang_fu", value: "康复科"},
                {key: "mei_rong", value: "美容科"},
                {key: "xin_li", value: "心理科"},
                {key: "xin_shen_yi_xue", value: "心身医学科"},
                {key: "ti_jian_zhong_xin", value: "体检中心科"},
                {key: "yao_ji", value: "药剂科"},
                {key: "yi_wu", value: "医务科"},
                {key: "ying_yang", value: "营养科"},
            ],
        }
    },
    created() {
        this.takeoutId = this.$router.currentRoute.query.id;
        this.getFoodDetail();
    },
    methods: {
        getFoodDetail:function(){
            let url = CONSTANT.URL.DOCTOR.DOCTORCHECKINFO,
                data={
                    id:this.takeoutId
                }
            common.requestAjax(url,{},data,(res)=>{
                if(res.status == 200){
                    let data = res.data;
                    this.info = data.bussData
                }
            })
        },
        returnDotsArr(duty){
            if (duty) {
                let dd = "";
                this.dotsArr.map( item => {
                    if (item.key == duty) {
                        dd = item.value
                    }
                })
                return dd;
            } else {
                return ""
            }
        },
        imgClick(url){
            this.imgUrl = url;
            this.dialogVisible = true;
        },
        returnName(val){
            let str;
            this.sectionList.map((item)=>{
                if(item.key == val){
                    str = item.value;
                }
            })
            return str;
        }
    }
}
</script>

<style lang="scss" scoped>
    .food-container {
        .header{
            height: 36px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ddd;
            p{ float: left;height: 36px;line-height: 36px;margin: 0 0 0 10px;font-size: 18px;}
            .el-button{
                float: right;
            }
        }
        .main{
            margin-left: 5%;
            .table-wrap{
                width: 80%;
                margin-top: 30px;
                .header-wrap{
                    height: 50px;
                    line-height: 50px;
                    font-size: 14px; 
                    border: 1px solid #dedede;
                    padding-left: 50px;
                    background-color: #f5f5f5;
                    color: #000;
                    font-weight: bold;
                }
                .wrap-menu{
                    border-right: 1px solid #dedede;
                    border-left: 1px solid #dedede;
                    .menu-list{
                          border-bottom: 1px solid #dedede;
                          display: -webkit-box;
                          display: box;
                          display: -moz-box;
                          /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                          display: -webkit-flex;
                            /* 新版本 - 适配Chrome */
                          display: flex;
                         -webkit-box-align: center;
                         -moz-align-items: center;
                         -webkit-align-items: center;
                         align-items: center;
                         min-height: 80px;
                         font-size: 14px;
                         cursor: pointer;
                         &:hover{
                            background-color: #f5f7fa;
                         }
                         .menu-name{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                                /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                             -webkit-box-justify-content:  flex-end;
                            -moz-align-justify-content:  flex-end;
                            -webkit-align-justify-content:  flex-end;
                            justify-content:  flex-end;
                             flex: 1;
                             -webkit-flex: 1;
                             text-align: right;
                             min-height: 80px;
                             border-right: 1px solid #dedede;
                             color: #909399;
                             padding: 10px  30px 10px 0;
                         }
                        .menu-info{
                            display: -webkit-box;
                            display: box;
                            display: -moz-box;
                            /* 老版本 - 适配iOS 6-, Safari 3.1-6 */
                            display: -webkit-flex;
                                /* 新版本 - 适配Chrome */
                            display: flex;
                            -webkit-box-align: center;
                            -moz-align-items: center;
                            -webkit-align-items: center;
                            align-items: center;
                             -webkit-box-justify-content:  flex-start;
                            -moz-align-justify-content:  flex-start;
                            -webkit-align-justify-content:  flex-start;
                            justify-content:  flex-start;
                            min-height: 80px;
                             flex: 3;
                             -webkit-flex: 3;
                              padding: 10px  0px 10px 30px;;
                             .image-info{
                                 width: 80px;
                                cursor: pointer;
                                height: 40px;
                                 margin-right: 10px;
                             }
                             .avatar{
                                 width: 80px;
                                 height: 80px;
                                 border-radius: 50%;
                                 -webkit-border-radius: 50%;
                             }
                         }
                    }
                }
            }
        }
    }
</style>
